<script setup>
import { ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { getInOutLogListApi } from '@/apis/orderManagement.js'
import { inType, outType } from '@/apis/dict.js'
import { useButtonStyle } from '@/composables/useButtonStyle.js'

// 正确使用组合式函数获取按钮样式
const buttonStyle = useButtonStyle()
const logList = ref([])
const loadStatus = ref({
  status: 'loadmore',
  noMore: false,
  loading: false,
})

const type = ref('inorderoperlog')
const params = ref({
  pageNum: 1,
  pageSize: 10,
  inorderid: '',
  outorderid: '',
})
const company = ref('')
onLoad(async (options) => {
  type.value = options.type === 'inorder' ? 'inorderoperlog' : 'outorderoperlog'
  try {
    const data = JSON.parse(options.data)
    company.value = data.company
    params.value.inorderid = data.id
    params.value.outorderid = data.id
    await getTyleList()
    await getLogList()
  } catch (error) {
    console.error('解析数据失败:', error)
    uni.showToast({ title: '数据加载失败', icon: 'none' })
  }
})

const tyleList = ref([])
const getTyleList = async () => {
  try {
    let res = null
    if (type.value === 'inorderoperlog') {
      res = await inType()
    } else {
      res = await outType()
    }
    tyleList.value = res.data
  } catch (error) {}
}

const getLogList = async () => {
  // 如果已经没有更多数据或者正在加载中，则不再请求
  if (loadStatus.value.noMore || loadStatus.value.loading) {
    return
  }

  loadStatus.value.loading = true
  loadStatus.value.status = 'loading'

  try {
    const res = await getInOutLogListApi(params.value, type.value)
    const { rows, total } = res
    if (total === 0) return

    const arr = rows.map((item) => {
      console.log('tyleList.value', tyleList.value)
      return {
        ...item,
        opertype: tyleList.value.find((i) => i.dictValue === item.opertype)
          ?.dictLabel,
      }
    })
    if (params.value.pageNum === 1) {
      logList.value = arr || []
    } else {
      logList.value = [...logList.value, ...(arr || [])]
    }
    if (
      (arr || []).length < params.value.pageSize ||
      logList.value.length >= total
    ) {
      loadStatus.value.noMore = true
      loadStatus.value.status = 'nomore'
    } else {
      loadStatus.value.status = 'loadmore'
    }
    params.value.pageNum++
  } catch (error) {
    loadStatus.value.status = 'loadmore'
    uni.showToast({ title: '获取操作日志失败', icon: 'none' })
  } finally {
    loadStatus.value.loading = false
  }
}

// 实现下拉加载更多功能
onReachBottom(() => {
  if (!loadStatus.value.noMore) {
    getLogList()
  }
})

// 详情查看功能
const showDetails = (item) => {
  const logData = JSON.stringify(item)
  uni.navigateTo({
    url: `/pages/orderManagement/logDetail?logData=${logData}`,
  })
}
</script>

<template>
  <view class="page_container">
    <view v-if="logList.length">
      <view class="list-card" v-for="(item, index) in logList" :key="index">
        <view class="card-header">
          <view class="order-info">
            <text class="order-id">操作类型：{{ item.opertype }}</text>
          </view>
        </view>
        <view class="card-content">
          <view class="info-grid">
            <view class="info-item">
              <text class="info-label">入库订单ID:</text>
              <text class="info-value overflow_1">{{
                item.inorderid || item.outorderid || '未知'
              }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">客户:</text>
              <text class="info-value overflow_1">{{ company || '无' }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">操作员:</text>
              <text class="info-value overflow_1">{{ item.nickname }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">操作日期:</text>
              <text class="info-value">{{ item.operdate || '无' }}</text>
            </view>
            <view class="info-item full-width">
              <text class="info-label">操作内容:</text>
              <text class="info-value">{{ item.operinfo || '无' }}</text>
            </view>
            <view class="info-item full-width">
              <text class="info-label">备注:</text>
              <text class="info-value">{{ item.memo || '无' }}</text>
            </view>
          </view>
        </view>
        <view class="card-actions">
          <u-button
            size="mini"
            :custom-style="buttonStyle.customStyle"
            type="primary"
            plain
            @click="showDetails(item)"
          >
            <u-icon name="info" size="30"></u-icon> 详情
          </u-button>
        </view>
      </view>
      <!-- 加载更多组件 -->
      <u-loadmore :status="loadStatus.status" />
    </view>
    <view v-else>
      <u-empty mode="list"></u-empty>
    </view>
  </view>
</template>

<style scoped lang="scss">
.list-card {
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
  overflow: hidden;
  border: 1rpx solid #eee;
}

.card-header {
  padding: 24rpx 24rpx 16rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .order-info {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .order-id {
      font-size: $list-font-size;
      font-weight: 500;
      color: $list-color;
    }
  }
}

.card-content {
  padding: 20rpx 24rpx;
}

.info-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -8rpx;
}

.info-item {
  width: 50%;
  padding: 8rpx;
  display: flex;
  flex-direction: column;

  &.full-width {
    width: 100%;
  }

  .info-label {
    font-size: $list-font-size;
    color: $list-color;
    margin-bottom: 4rpx;
  }

  .info-value {
    font-size: $list-font-size;
    color: $list-color;
    font-weight: 400;
  }
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  padding: 16rpx 24rpx;
  border-top: 1rpx solid #f0f0f0;
  gap: 16rpx;
}

.page_container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.overflow_1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
